<template>
	<view class="page" v-if="finished">
		<navBar title="我的余额"></navBar>
		<view class="bg"></view>
		<view class="body">
			<view class="tabs">
				<view :class="{'item': true, 'active': index == current}" v-for="(item, index) in tabs" :key="index"
					@click="tabChange(index)">
					{{item.name}}
				</view>
			</view>
			<view class="balance">
				<view class="flex-btw">
					<view class="moneys">
						<view class="label">我的余额</view>
						<view>¥ {{ current === 0 ? detail.money || 0 : detail.profit_money || 0}}</view>
					</view>
					<view class="detail" v-if="current===0" @click="showDetail = !showDetail">
						{{showDetail ? '充值' : '明细'}}
					</view>
					<view class="detail" v-if="current == 1 && withdrawStatus" @click="withdrawal">
						提现
					</view>
				</view>
				<view class="info-list" v-if="current == 1">
					<view class="item">
						<view class="moneys">{{income.total_money}}</view>
						<view class="label">总收益</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="moneys">{{income.ok_money}}</view>
						<view class="label">已提现</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="moneys">{{income.withdrawal_money}}</view>
						<view class="label">提现中</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="moneys">{{income.wait_money}}</view>
						<view class="label">待入账</view>
					</view>
				</view>
			</view>
			<view class="box">
				<view class="detail" v-if="showDetail">
					<view class="switch">
						<view :class="{item: true, active: detailType === 1}" @click="changeDetailType(1)">
							{{current === 0 ? '储值' : '收入'}}
						</view>
						<view :class="{item: true, active: detailType === 2}" @click="changeDetailType(2)">
							{{current === 0 ? '消费' : '支出'}}
						</view>
					</view>
					<block v-if="current === 0">
						<view class="list" v-if="detailType === 1">
							<view class="item" v-for="(item, index) in bill" :key="index">
								<view class="left">
									<view class="source">线上充值</view>
									<view>{{item.createtime | formatTime}}</view>
								</view>
								<view class="moneys">+{{item.money}}</view>
							</view>
						</view>
						<view class="list" v-else>
							<view class="item consume" v-for="(item, index) in bill" :key="index">
								<view class="left">
									<view class="source">产品名称: {{item.goods_name}}</view>
									<view class="source">订单号: {{item.order_num}}</view>
									<view class="source">订单金额: ¥{{item.money}}</view>
								</view>
								<view class="right">
									<view class="moneys">-{{item.money}}</view>
									<view class="time">{{item.create_time}}</view>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="list">
							<view class="item income" v-for="(item, index) in bill" :key="item.id">
								<block v-if="detailType === 1">
									<view class="left">
										<view>订单类型：<text class="moneys">{{item.type_text}}</text></view>
										<view style="white-space: nowrap;">订单号：{{item.order_no}}</view>
										<view>订单金额：<text class="moneys">￥{{item.order_money}}</text></view>
										<view>实际收入：<text class="income">￥{{item.earnings_money}}</text></view>
									</view>
									<view class="right">
										<view class="status">{{item.status | incomeStatus}}</view>
										<view class="time">{{item.create_time}}</view>
									</view>
								</block>
								<block v-else>
									<view class="left">
										<view>提现方式：{{item.mode === 1 ? '自动打款' : '微信打款'}}</view>
										<view>提现金额：<text class="moneys">￥{{item.money}}</text></view>
										<view>到账金额：<text class="income">￥{{item.arrival_money}}</text></view>
									</view>
									<view class="right">
										<view class="status">{{item.state | withStatus}}</view>
										<view class="time">{{item.time}}</view>
									</view>
								</block>
							</view>
						</view>
					</block>
				</view>
				<view class="recharge" v-else>
					<view class="list">
						<view @click="rechargeIndex = index" :class="{item: true, active: rechargeIndex === index}"
							v-for="(item, index) in rechargeList" :key="item.id">
							<view class="moneys">¥{{item.recharge_amount}}</view>
							<view class="remark">赠送{{item.gift_amount}}元</view>
						</view>
					</view>
					<view class="agreement" @click="agree = !agree">
						<u-icon name="checkmark-circle" v-if="!agree"></u-icon>
						<u-icon name="checkmark-circle-fill" v-else color="#CB712B"></u-icon>
						<view>
							阅读并同意<text class="link" @click.stop="openDetail">《储值服务协议》</text>
						</view>
					</view>
					<view class="recharge-btn" @click="submit">充值</view>
				</view>
			</view>
			<view class="load-hint" v-if="current === 0 && showDetail === true">加载完成</view>
		</view>
	</view>
</template>

<script>
	import {
		walletRecord,
		minCashApi,
	} from "@/utils/api";
	import {
		rechargeListApi,
		balanceDetailApi,
		rechargeApi,
		incomeDetailApi,
		withdrawStatusApi
	} from "@/api/my.js"
	import {
		mapActions,
		mapGetters
	} from "vuex";
	import {
		formatTime
	} from '@/utils/time.js'
	import "./wallet.scss"
	import navBar from '@/components/navBar/navBar.vue'
	export default {
		computed: {
			...mapGetters(["userInfo"]),
			targetDetails() {
				if (this.current && this.details) {
					return this.details.filter(item => item.status == 5)
				} else {
					return []
				}
			}
		},
		watch: {},
		components: {
			navBar
		},
		data() {
			return {
				tabs: [{
						name: "钱包余额",
					},
					{
						name: "收益余额",
					},
				],
				background: {
					background: '#CB712B'
				},
				// 1-储值,收入 2-消费,支出
				detailType: 1,
				current: 1,
				showDetail: true,
				rechargeIndex: 0,
				// 同意服务协议
				agree: false,
				rechargeList: [],
				detail: {},
				income: {},
				finished: false,
				withdrawStatus: true
			};
		},
		filters: {
			formatTime(val) {
				let str = formatTime(val, 'Y-M-D h:m:s')
				return str
			},
			incomeStatus(val) {
				let str = ""
				switch (val) {
					case 1:
						str = "已入账"
						break;
					case 0:
						str = "待入账"
				}
				return str
			},
			withStatus(val) {
				let str = ""
				switch (val) {
					case 1:
						str = "提现成功"
						break;
					case 2:
						str = "提现失败";
						break;
					default:
						str = '等待处理'
				}
				return str
			}
		},
		onLoad(opt) {
			this.current = opt.type || 0
			this.initDetails();
			this.getWithdrawalStatus()
		},
		computed: {
			bill() {
				let arr = []
				// 钱包消费明细
				if (this.current === 0) {
					let {
						money_detail
					} = this.detail
					if (money_detail) {
						let keys = ['Recharge', 'consumption']
						arr = money_detail[keys[this.detailType - 1]]
					}
				} else {
					let {
						money_detail
					} = this.income
					switch (this.detailType) {
						case 1:
							arr = money_detail.income;
							break;
						case 2:
							arr = money_detail.expenditure
							break;
					}
				}

				return arr;
			}
		},
		methods: {
			...mapActions(["setAttr"]),
			moneyFormat: (item) => {
				if ([1, 2, 4].includes(Number(item.status))) {
					return "-" + item.money;
				} else {
					return item.money;
				}
			},
			async getWithdrawalStatus() {
				let {
					data
				} = await withdrawStatusApi()
				this.withdrawStatus = data.withdrawal_switch == "1"
			},
			changeDetailType(type) {
				this.detailType = type
			},
			async initDetails() {
				let res = await rechargeListApi()
				this.rechargeList = res.data
				res = await balanceDetailApi()
				this.detail = res.data
				// 获取收益详情
				let {
					data
				} = await incomeDetailApi()
				this.income = data
				this.finished = true
			},
			tabChange(index) {
				if (index === 1) {
					this.showDetail = true
				}
				this.current = index;

			},
			openDetail() {
				uni.navigateTo({
					url: 'agreement/agreement'
				})
			},
			withdrawal() {
				uni.navigateTo({
					// url: "withdrawal/withdrawal"
					url: "/pages/wallet/withdrawal/withdrawal"
				})
			},
			submit() {
				if (!this.agree) {
					uni.showToast({
						icon: 'none',
						title: '请先同意储值服务协议'
					})
					return
				}
				var that = this;
				// 获取充值金额
				let {
					recharge_amount,
					id
				} = this.rechargeList[this.rechargeIndex]
				recharge_amount = parseFloat(recharge_amount)
				rechargeApi({
					money: recharge_amount,
					package_id: id
				}).then(resp => {
					if (resp.code == 200) {
						// if (resp.data.payRes) {
						const {
							timeStamp,
							nonceStr,
							signType,
							paySign
						} = resp.data.payRes;
						uni.requestPayment({
							timeStamp,
							nonceStr,
							package: resp.data.payRes.package,
							signType,
							paySign,
							success: (resp) => {
								uni.showToast({
									icon: "none",
									title: "支付成功",
									success: () => {
										that.setAttr({
											key: "money",
											value: Number(that.userInfo.money) +
												Number(that.val),
										});
										setTimeout(() => {
											uni.redirectTo({
													url: "/pages/wallet/wallet",
												},
												1500
											);
										});
									},
								});
							},
							fail: (error) => {
								uni.showToast({
									icon: "none",
									title: "支付失败",
								});
							},
						});
						// }
					}
				})
				return
				moneyRecharge({
					money: this.val,
				}).then((resp) => {
					if (resp.code == 200) {
						// if (resp.data.payRes) {
						const {
							timeStamp,
							nonceStr,
							signType,
							paySign
						} = resp.data.payRes;
						uni.requestPayment({
							timeStamp,
							nonceStr,
							package: resp.data.payRes.package,
							signType,
							paySign,
							success: (resp) => {
								uni.showToast({
									icon: "none",
									title: "支付成功",
									success: () => {
										that.setAttr({
											key: "money",
											value: Number(that.userInfo.money) +
												Number(that.val),
										});
										setTimeout(() => {
											uni.redirectTo({
													url: "/pages/wallet/wallet",
												},
												1500
											);
										});
									},
								});
							},
							fail: (error) => {
								uni.showToast({
									icon: "none",
									title: "支付失败",
								});
							},
						});
						// }
					}
				});
			},

		},
	};
</script>
